<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jsonp json with padding 填充式json 参数式json</title>
</head>

<body>
    <script>
        window.onload = function () {
            (function () {
                // 这里指定的jsonp回调函数的名字:handleResponse
                var handleResponse = function (res) {
                    // 处理返回的json数据
                    console.log(res);
                }

                // jsonp是通过动态创建script标签来使用的，使用时src属性指定一个跨域的url，
                // 这里的script标签与img标签类似，都有能力不受限制的从其他域加载资源
                // 因为jsonp是有效的javascript代码，所以在请求完成后即在jsonp响应加载到页面中以后，就会立即执行

                var script = document.createElement("script");

                // jsonp由两部分组成：回调函数和数据，回调函数就是当响应到来时应该在页面中调用的函数
                // 回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的json数据
                script.src = "http://freegeoip.net/json/?callback=handleResponse";
                document.body.insertBefore(script, document.body.firstChild);

                //使用jsonp的两大缺点:
                // 1.不安全，如果其他域不安全很有可能在响应中夹带一些恶意代码,而此时除了完全摒弃jsonp以外,没有办法追究
                // 2.要确定jsonp请求是否失败并不容易
                // h5中虽然为script新增了一个 onerror事件处理程序，但目前还没得到支持
                // 开发人员不得不用计时器检测指定时间内是否收到了响应，但就算这样做也不能尽人意
                // 毕竟不是每个用户的网速和宽带都一样 
            })();

            (function () {
                // 利用hash，场景是当前页面A 通过iframe或frame 嵌入了跨域的页面 B
                var B = document.getElementsByTagName("iframe");
                B.src = B.src + "&" + 'yourdata';

                // 在B中的伪代码如下
                window.onhashchange = function () {
                    var data = window.location.hash;
                }
            })();

            (function () {
                // postMessage
                // 窗口A(http://a.com) 向窗口B (http://b.com)发送信息
                // 窗口A 要向那个窗口发送数据
                window.postMessage('yourdata', 'http://b.com');

                // 窗口B
                window.addEventListener('message', function (event) {
                    console.log(event.origin); //http://a.com
                    console.log(event.source); //来自A 窗口的引用
                    console.log(event.data); //接受数据
                }, false)

                // 同理B向A发送数据 也采用类似的方法 可直接采用event.source.postMessage()
            })();
        }
    </script>
</body>

</html>